import monakaiTheme from 'monaco-themes/themes/Monokai.json'

import { monaco } from '@/components/common/MonacoEditor/customMonaco'
import { ref, shallowRef } from 'vue'

export default function () {
    const editorRef = ref<HTMLDivElement>()

    const monacoEditorIns = shallowRef<monaco.editor.IStandaloneCodeEditor>()

    function initEditor() {
        try {
            if (!editorRef.value) {
                return console.warn('editorRef container is null', editorRef)
            }
            const editorIns = monaco.editor.create(editorRef.value, {
                value: '',
                language: 'json',
            })

            monaco.editor.defineTheme(
                'monakai',
                monakaiTheme as monaco.editor.IStandaloneThemeData,
            )
            monaco.editor.setTheme('monakai')

            monacoEditorIns.value = editorIns
        } catch (error) {
            console.warn(error)
        }
    }

    function getEditorContent() {
        const content = monacoEditorIns.value?.getValue()

        return content
    }

    function setEditorContent(content: string) {
        monacoEditorIns.value?.setValue(content)
    }

    function destroyEditor() {
        monacoEditorIns.value.dispose()
    }

    // function setEditorLanguage(lang:string){
    //     monacoEditorIns.value
    // }

    return {
        editorRef,
        monacoEditorIns,
        initEditor,
        destroyEditor,
        getEditorContent,
        setEditorContent,
    }
}
